<template>
    <div class="container">
        <div class="header">
            <img class="header-img" src="@/assets/images/long-jump-header.png" />
            <div class="header-title">立定跳远-{{homeActive==1?'测试':'练习'}}</div>
            <!-- <div class="header-type">{{homeActive==1?'测试':'练习'}}</div> -->
            <img class="header-star" src="@/assets/images/star.png" />
        </div>
        <div class="content">
            <template v-if="type==1">
                <div class="content-left-1">
                    <div class="content-left-1-name">举手识别</div>
                    <img class="content-left-1-hand" src="@/assets/images/long-jump-show-hands.png" />
                </div>
                <div class="content-right-1">
                    立定<br />跳远
                </div>
            </template>
            <template v-if="type==2">
                <div class="content-left-2">
                    <!-- <img class="content-left-2-head" src="@/assets/images/profile.jpg" /> -->
                    <img class="content-left-2-head" :src="user?.xsZp" />
                    <div class="content-left-2-name">{{ user?.xsName }}</div>
                    <div class="content-left-2-class">{{ user?.bjName }}</div>

                </div>
                <div class="content-right-2">
                    开始<br />跳远
                </div>
            </template>

            <template v-if="type==3">
                <div class="content-left-3">
                    <img class="content-left-3-head" :src="user.xsZp" />
                    <div class="content-left-3-name">{{ user.xsName }}</div>
                    <div class="content-left-3-class">{{ user.bjName }}</div>

                </div>
                <div class="content-right-3">
                    <div class="content-right-3-item" style="margin-top: 100px;">
                        <img src="@/assets/images/achievements.png" />
                        <div class="content-right-3-item-label">成绩</div>
                        <div class="content-right-3-item-value">{{ user.value }} <span>cm</span></div>
                    </div>
                    <div class="content-right-3-item" style="margin-top: 30px;">
                        <img src="@/assets/images/score.png" />
                        <div class="content-right-3-item-label">评分</div>
                        <div class="content-right-3-item-value">{{user.score}} <span style="width: 90px;padding-left: 20px;">分</span></div>
                    </div>

                </div>
            </template>
        </div>
    </div>

</template>
 
<script setup >
import { ref, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import useUserStore from '@/store/modules/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore();
const props = defineProps({
    user: { type: Object, default: null }
})

const emits = defineEmits(['start', 'scanfase']);
defineExpose({
    init, resetData, ahievements
})
const { proxy } = getCurrentInstance();
const { homeActive } = storeToRefs(userStore)
const type = ref(1);
const user = ref(null);

//学生信息
let timeout;
//val是 mqtt接收到的学生信息 
function init(val) {
    if (user.value) return
    user.value = val;
    //type1举手识别的页面 2识别出来学生的页面准备开始跳  3是跳完后的成绩页面
    type.value = 2;
    proxy.$modal.msgSuccess("5秒后开始");
    //定时5秒后自动开始
    timeout = setTimeout(() => {
        emits('start');
    }, 5000)
}


//成绩
function ahievements(obj) {
    console.log(obj)
    //身份证对比
    if (user.value && user.value.xsSfz == obj.sjSfz) {
        user.value['value'] = obj.sjDfsz;
        user.value['score'] = obj.sjFs;
        type.value = 3;
        proxy.$modal.msgSuccess("30秒自动返回");
        setTimeout(() => {
            resetData(true);
        }, 30000)
    }
}

//数据重置
function resetData() {
    type.value = 1;
    user.value = null;
    if (timeout) {
        clearTimeout(timeout);
        timeout = null;
    }
      emits('scanface');
}
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.header {
    position: absolute;
    width: 800px;
    right: 130px;
    top: 17px;

    &-img {
        width: 388px;
        height: 388px;
    }
    &-title {
        position: absolute;
        top: 170px;
        right: 20px;
        font-family: YouSheBiaoTiHei;
        font-size: 80px;

        line-height: 58px;
        letter-spacing: 0.04em;
        font-variation-settings: "opsz" auto;
        color: #f3d500;
    }
    &-type {
        position: absolute;
        top: 182px;
        right: 20px;
        width: 100px;
        height: 44px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f3d500;
        color: #333;
    }
    &-star {
        position: absolute;
        top: 160px;
        right: 0px;
        width: 16px;
        height: 24px;
    }
}
.content {
    position: relative;
    display: flex;
    margin: 289px 110px 0 110px;
    width: 1690px;
    justify-content: space-between;
    z-index: 2;
    &-left-3 {
        width: 604px;
        height: 580px;
        border-radius: 14px;
        background: #236be7;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        &-name {
            margin-top: 45px;
            font-size: 78px;
            color: #fff;
        }
        &-head {
            margin-top: 100px;
            width: 130px;
            height: 130px;
            border-radius: 50%;
        }
        &-class {
            margin-top: 40px;
            font-size: 62px;
            color: #fff;
        }
    }

    &-right-3 {
        cursor: pointer;
        width: 1043px;
        height: 668px;
        border-radius: 14px;
        background: #c7aa1b;
        display: flex;
        flex-direction: column;

        color: #ffffff;
        &-item {
            width: 100%;
            padding: 0 100px;
            display: flex;
            overflow: hidden;
            user-select: none;
            align-items: center;
            img {
                width: 54px;
                height: 54px;
                position: relative;
                top: 4px;
            }
            &-label {
                width: 140px;
                margin-left: 10px;
                font-size: 54px;
                color: #ffffff;
            }
            &-value {
                width: 660px;
                display: flex;
                justify-content: flex-end;
                position: relative;

                font-size: 218px;

                font-family: YouSheBiaoTiHei;
                font-size: 218px;

                line-height: 182px;
                letter-spacing: 0.04em;

                font-variation-settings: "opsz" auto;
                letter-spacing: 0.04em;
                color: #fff;
                span {
                    font-size: 44px;
                }
            }
        }
    }
    &-left-2 {
        width: 604px;
        height: 580px;
        border-radius: 14px;
        background: #236be7;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        &-name {
            margin-top: 45px;
            font-size: 78px;
            color: #fff;
        }
        &-head {
            margin-top: 100px;
            width: 130px;
            height: 130px;
            border-radius: 50%;
        }
        &-class {
            margin-top: 40px;
            font-size: 62px;
            color: #fff;
        }
    }

    &-right-2 {
        cursor: pointer;
        width: 1043px;
        height: 668px;
        border-radius: 14px;
        background: #03c25f;
        font-family: YouSheBiaoTiHei;
        font-size: 190px;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 182px;
        letter-spacing: 0.04em;
        color: #ffffff;
        user-select: none;
    }
    &-left-1 {
        width: 604px;
        height: 580px;
        border-radius: 14px;
        background: #236be7;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        &-name {
            font-family: YouSheBiaoTiHei;
            font-size: 114px;
            line-height: 182px;
            letter-spacing: 0.04em;
            margin-top: 30px;

            color: #ffcc00;
        }
        &-hand {
            margin-top: 20px;
            width: 131.84px;
            height: 261.26px;
        }
    }

    &-right-1 {
        cursor: pointer;
        width: 1043px;
        height: 668px;
        border-radius: 14px;
        background: #236be7;
        font-family: YouSheBiaoTiHei;
        font-size: 190px;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 182px;
        letter-spacing: 0.04em;
        user-select: none;
        color: #ffffff;
    }
}
</style>

